<!-- 艺人发布动态 -->
<template>
	<view class="publishTab2">
		<view class="content">

			<!-- 文本框 -->
			<view class="input">
				<uni-easyinput type="textarea" autoHeight v-model="formData.content"
					placeholder="这一刻的动态……"></uni-easyinput>
			</view>

			<view class="image">
				<upData shape="party" type="all" :box="180" :imgSize="9" @submit="setImg3" :borderRadius="24">
				</upData>
			</view>

			<view class="address">
				<liu-chooseAddress :typeNumber="1" @submit="submitAddress" :propsLoading="false">
					<div class="address-slot">
						<view class="slot-left">
							<uni-icons type="location" size="36rpx" :color="addressColor"></uni-icons>
							<text class="text"
								:style="{color: addressColor}">{{formData.address | addressFilters}}</text>
						</view>
						<view class="slot-right">
							<uni-icons type="right" size="36rpx" :color="addressColor"></uni-icons>
						</view>
					</div>
				</liu-chooseAddress>
			</view>
		</view>

		<view :class="{
			'button':true,
			'button2':verifyButton 
		}" @click="submit">确认发布</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	// api请求
	import {
		setUserUploadApi, // 文件上传
	} from '@/api/user.js'

	import {
		getArtistMomentAddApi, // 添加艺人动态
	} from '@/api/artist.js'


	// 公共方法
	import {
		wxUpDate, // 小程序上传
	} from '@/utils/wx/wxPublick-weixin.js'

	export default {
		data() {
			return {
				formData: {
					content: '', // 内容
					// address: '', // 地址
					// photo: '', // 图片
					// latitude: '', // 纬度
					// longitude: '', // 经度
					// cityCode: '', // 城市编码
					// video: '', // 视频地址
				}, // 表单数据

				fileData: false, // 有没有返回文件



			};
		},
		computed: {
			addressColor() {
				return this.formData.address ? '#18bc37' : '#333'
			},


			/**
			 * 判断是否可以点击
			 */
			verifyButton() {
				console.log(this.formData.photo, 'kk', this.formData.video);
				// if (this.formData.address === '' || (this.formData.content === ''&& !this.fileData)) {
				if (this.formData.content === '' && !this.fileData) {
					return false
				} else {
					return true
				}
			}




		},

		filters: {
			addressFilters(val) {
				return val ? val : '所在位置'

			},

		},
		
		methods: {
			...mapMutations(['setIsShow']),

			/**
			 * 多图
			 */
			setImg3(val) {

				this.fileData = val.length > 0 ? true : false

				// 判断第一个是什么类型,就可以知道应该赋值给哪个了
				let type = this.checkMediaType(val[0])

				if (type === 'image') {
					
					// 如果返回的是数组，并且长度大于0,那就转成json,如果不是那就直接赋值，或者赋值为空
					if(Object.prototype.toString.call(val) === '[object Array]'){
						
						if(val.length>0){
							this.formData['photo'] = JSON.stringify(val)
						}else{
							this.formData['photo'] = ''
						}
					}else{
						this.formData['photo'] = val
					}
					
				} else if (type === 'video') {
					
					// 如果返回的是数组，并且长度大于0,那就转成json,如果不是那就直接赋值，或者赋值为空
					if(Object.prototype.toString.call(val) === '[object Array]'){
						
						if(val.length>0){
							this.formData['video'] = val[0]
						}else{
							this.formData['video'] = ''
						}
					}else{
						this.formData['video'] = val
					}
					
					
				} else {
					this.$public.showText('不支持文件格式')
				}
			},

			/**
			 * 地址选择确定
			 */
			submitAddress(e) {

				let str = e.address.split("市")
				e.address = e.title + '·' + str[str.length - 1]

				let obj = {}
				// 赋值
				for (let key in e) {
					if (key !== 'title') {
						obj[key] = e[key]
					}
				}

				Object.assign(obj, this.formData)
				
				this.formData = {...obj}


			},

			change(e) {
				console.log('输入框', e);
			},



			/**
			 * 确认发布
			 */
			async submit() {
				// 校验
				if (!this.verifyForm()) {
					return
				}

				// 发布动态
				this.getArtistMomentAdd()


			},

			/**
			 * 按钮显示颜色，如果不达到标准就不能点击
			 */
			verifyForm() {
				let str = ''

				// if (this.formData.address === '') {
				// 	str = '请选择所在地址'
				// } else 

				if (this.formData.content === '' && this.formData.photo === undefined && this.formData.video ===
					undefined) {
					str = '请输入动态或者照片再发布活动'
				}

				if (str !== '') {
					this.$public.showText(str)
					return false
				} else {
					return true
				}
			},




			/**
			 * 文件上传
			 */
			async setUserUpload(parmas, type) {
				let myUrl0 = await wxUpDate(parmas, type)
				let myUrl = JSON.parse(myUrl0).data

				return myUrl;
			},



			/**
			 * 判断是图片还是视频
			 */
			checkMediaType(url) {
				console.log(url, '这是');
				let paths = url.split('.')
				let path = paths[paths.length - 1]


				// 声明支持的图片和视频文件扩展名
				let imageExtensions = ['jpg', 'jpeg', 'gif', 'png', 'webp', 'ico', 'bmp', 'tif', 'tga'];
				let videoExtensions = ['mp4', 'mkv', 'gif', 'webm', 'avi', 'mpeg', 'mov', 'wmv'];


				// 判断文件扩展名是否在图片扩展名数组中
				if (imageExtensions.includes(path)) {
					return 'image';
				}
				// 判断文件扩展名是否在视频扩展名数组中
				if (videoExtensions.includes(path)) {
					return 'video';
				}
				// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
				return null;
			},


			/**
			 * 添加艺人动态
			 */
			async getArtistMomentAdd() {

				console.log(this.formData, '上传前');


				const res = await getArtistMomentAddApi(this.formData)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '添加动态失败')
					return
				}
				this.setIsShow(true)
				this.$public.showText('添加成功')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/activityTab/index'
					})
				}, 3000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.publishTab2 {
		#padding(24rpx);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;

		.content {
			#box(-, -, 24rpx, #fff);
			#padding(24rpx);

			.input {}

			.image {}

			.address {

				.address-slot {
					width: calc(100vw - 96rpx);
					margin-top: 24rpx;
					#flex(-, space-between, center);

					.slot-left {
						#flex(-, -, center);
						#font(28rpx, #333);

						.text {
							margin-left: 12rpx;
						}

					}

				}
			}


		}



		.button {
			margin-top: 60rpx;
			#box(-, 88rpx, 100rpx, #999);
			#font(36rpx, #FDF3F3, 600);
			#flex(-, center, center);
		}

		.button2 {
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
		}
	}
</style>